<template>
  <div id="home" @scroll="toggleHeader">
    <header class="border-bottom" v-show="show"><img src="/favicon.ico" alt=""></header>
    <div class="swp">
      <swiper :aaa="arr" height="7.5rem" ></swiper>
      <div class="swp-uu">
        <ul>
          <li>
            <section>
              <img src="/cd1.7808faf.png" alt="">
            </section>
            <p>签到</p>
          </li>
          <li>
             <section>
              <img src="/cd1.7808faf.png" alt="">
            </section>
            <p>礼券</p>
          </li>
          <li>
             <section>
              <img src="/cd1.7808faf.png" alt="">
            </section>
             <p>砍价</p>
          </li>
          <li>
             <section>
              <img src="/cd1.7808faf.png" alt="">
            </section>
            <p>专栏</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="container">

      <div class="title border-bottom">
        <div>
          <p>全民砍价</p> 
          <span>></span>
        </div>
      </div>

      <!-- 请求列表数据 -->
      <div @click="gotokj">
        <list v-for="item in list" :key="item.id" :obj="item" class="border-bottom" ></list>
      </div>
     


      <div class="title">
        <div>
          <p>精选专题</p> 
          <span>></span>
        </div>
      </div>
      <div class="zt">
        <recommended v-for="item in recArry" :key="item.id" :obj="item" @click.native="tospecial(item.id)"></recommended>
      </div>

      <div class="title">
        <div>
          <p>人气推荐</p> 
          <span>></span>
        </div>
      </div>

      <div class="tj">
        <!-- <div @click="todetail"> -->
        <detial v-for="item in tjList" :key="item.id" :obj="item" @click.native="todetail(item.id)"></detial>
        </div>
      </div>

    </div>

  <!-- </div> -->
</template>

<script>
import { getBanners,getkj, getrecommended } from '@/utils/api'
import list from '@/components/list/list'
import demo1 from '@/mixins/demo1'
import Swiper from '@/components/swiper/swiper.vue'
import recommended from '@/components/list/recommended'
import detial from '@/components/list/detial'
// import Detial from '../components/list/detial.vue'
export default {
  name: 'Home',
  data() {
    return {
    show: false,
    arr: [],
    list:{},
    recArry:[],
    tjList:{},
    }
  },
  mixins: [demo1],
  created() {
    //  加载显示 loding

    // 调用 函数请求轮播图
    this.fn()

    // 请求砍价的数据
    getkj().then(res =>{
        var obj1 =res.goodsMap
        var obj={}
        var obj2={}
        Object.keys(obj1).sort().map((item,index) =>{
          if(index>2){
            obj[item] =obj1[item]
          } 
          if(index >0){
            obj2[item] = obj1[item]
          }
          
        })
        this.tjList = obj2
        // console.log(this.tjList);
        this.list = obj
    })

    // 请求专题数据
    getrecommended().then(res =>{
     this.recArry = res
     console.log(this.recArry);
    })

  },
  methods: {
    // 请求轮播图数据的方法
    fn(){
      getBanners().then(res => {
          this.arr = res
      }) 
    
    },
    // 滚动显示顶部
    toggleHeader(e) {
      if(e.target.scrollTop > 500) {
        this.show = true
      } else {
        this.show = false
      }
    },
    gotokj(){
      console.log(1);
      this.$router.push('cutprice')
    },  
    todetail(id){
      this.$router.push({
        name:"detail",
        query:{
          id
        }
      })
    },
    tospecial(id){
      console.log(id);
      this.$router.push({
        name:'special',
        query:{
          id
        }
      })
    }
  },
  components:{
    Swiper,
    list,
    recommended,
    detial,
  }
}
</script>
<style lang="scss" scoped>
  #home{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    header{
      font-size: .26rem;
      text-align: center;
      // line-height: .8rem;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      img{
        margin: 0.1rem auto 0.1rem;
        vertical-align: middle;
        width: 0.8rem;
        height: 0.8rem;
      }
    }
    .container{
      // height: 100%;
      padding-top: 0.01rem;
      padding-bottom: .2rem ;
      // background-image: linear-gradient(to bottom, yellow, red, blue);
      background-color: #F5F5F5;
      .title{
        width: 100%;
        height: 0.86rem;
        margin-top: 0.2rem;
        line-height: 0.96rem;
        background-color: white;
        div{
          width: 100px;
          margin: 0 auto ;
          display: flex;
          font-size: 0.30rem;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
  .swp{
    width: 100%;
    height: 7.3rem;
    position: relative;
    overflow: hidden;
  }
  .swp-uu{
    width: 100%;
    height: 2.3rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    border-top-left-radius: 25% ;
    border-top-right-radius: 25% ;
    display: flex;
    align-items: center;
    ul{
      width: 100%;
      height: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      li{
        width: 25%;
        height: 100%;
        section{
          width: 100%;
          height: 50%;
          text-align: center;
          img{
            width: 50%;
            height: 100%;
            vertical-align: middle;
          }
        }
        p{
          width: 100%;
          height: 30%;
          margin-top: 0.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.37rem;
        }
      }
    }
  }
.zt{
  width: 100%;
  height: 5rem;
  display: flex;
  align-content: center;
  overflow: hidden;
  overflow-x:auto ;
    background-color: white;

}
.zt::-webkit-scrollbar{
  display: none;
}
.tj{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin-bottom: 0.2rem;
  padding: 0 0.15rem;
}
</style>
